import React, { useEffect, useState } from 'react'
import { LocationO, WapHomeO, Search } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import Hoc from '../Hoc'
import { Input } from "antd"
import '../css/reservation.css'
import axios from '../axios/axios'
export default function Reservation() {
    const nav = useNavigate()
    const [types, setTypes] = useState([])
    const [content, setContent] = useState([])
    const [num, setNum] = useState(0)
    const [idx,setIdx]=useState('6688bbeae21d6ab0b8776bd7')
    const get_types = async () => {
        let data = await axios.get('/get_types')
        setTypes(data.data);
    }
    const get_content = async () => {
        let data = await axios.get('/get_content')
        setContent(data.data);
    }
    useEffect(() => {
        get_types()
        get_content()
    }, [])
    return (
        <div style={{ backgroundColor: 'rgb(243,246,255)' }}>
            <Hoc title='预约挂号'></Hoc>
            <div className='resevation_box'>
                <div className='resevation_box1'>
                    <div className='home_name'>北京大学第一医院</div>
                    <div className='home_level'><span className='type'>三甲甲等</span><span className='hoipital_type'>综合医院</span><span className='yibao'>非定点医保</span></div>
                    <div className='home_address'><LocationO style={{ position: 'relative', top: '2px' }} /><span>北京市东城区东单元北大街53号</span></div>
                </div>
                <div className='xian'></div>
                <div className='homes'>
                    <WapHomeO style={{ marginTop: '30px', marginLeft: '30px' }} />
                    <div className='fanhui'>返回首页</div>
                </div>
            </div>
            <div className='resevation_input'>
                <Input size="large" placeholder='搜索科室名称' suffix={<Search />} className='inp' />
            </div>
            <div className='resevation_box2'>
                <div className='resevation_content'>
                    {types.map((item, index) => {
                        return <div key={item._id} className={index == num ? 'resevation_content2' : 'resevation_content1'} onClick={() => {setNum(index),setIdx(item._id)}}>{item.title}</div>
                    })}

                </div>
                <div className='resevation_content3'>
                    {content.map((item, index) => {
                        if(item.tid==idx){
                            return <div key={item._id} className='resevation_content4' onClick={()=>nav('/department')}>{item.title}</div>
                        }
                        
                    })}
                </div>
            </div>
        </div >
    )
}
